<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆修改</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>
<body>

<div class="layui-card xyxx">
    <!--<div class="layui-card-header"><h5>车辆新增</h5></div>-->
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane"  id="from1">
            <div class="layui-row layui-col-space10">

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">车辆牌号：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="carNumbers" id="carNumbers"/>
                        <input type="hidden" class="layui-input" name="id" id="id" lay-verify="required"/>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">车辆颜色：</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" value="" placeholder="请选择颜色" class="layui-input" name="colour" id="colour" lay-verify="required"/>
                    </div>
                    <div class="layui-inline" style="left: -5px;">
                        <div id="test-rgb"></div>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">发动机号：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="engineNumber" id="engineNumber"/>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">车辆型号：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="carModel" id="carModel" lay-verify="required"/>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">车辆档型：</label>
                    <div class="layui-input-block">
                        <select name="carProfile" id="carProfile" lay-verify="required">
                            <option value=1>自动</option>
                            <option value=2>手动</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline layui-col-sm6">
                    <label class="layui-form-label">车辆类型：</label>
                    <div class="layui-input-block">
                        <select name="carType" id="carType" lay-verify="required">
                            <option value=1>小型轿车</option>
                            <option value=2>客车</option>
                            <option value=3>挂车</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">购买时间：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="buyTime" lay-verify="required" id="buyTime" placeholder="yyyy-MM-dd">
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">登记日期：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="registerTime" id="registerTime"
                               placeholder="yyyy-MM-dd" lay-verify="required">
                    </div>
                </div>

                <div class="layui-inline layui-col-sm6">
                    <label class="layui-form-label">燃油类型：</label>
                    <div class="layui-input-block">
                        <select name="fuelType" id="fuelType" lay-verify="required">
                            <option value=1>汽油</option>
                            <option value=2>柴油</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">初始里程：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="mileage" id="mileage"/>
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">保险截止日期：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="insurerTime" id="insurerTime"
                               placeholder="yyyy-MM-dd" lay-verify="required">
                    </div>
                </div>

                <div class="layui-inline  layui-col-sm6">
                    <label class="layui-form-label">保险公司：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="insurer" id="insurer" lay-verify="required"/>
                    </div>
                </div>

                <div class="layui-inline layui-col-sm6">
                    <label class="layui-form-label">年审截止日期：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="annualTime" id="annualTime"
                               placeholder="yyyy-MM-dd" lay-verify="required">
                    </div>
                </div>

            </div>

            <div class="layui-col-space10 layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">教练驾驶证：</label>
                    <!--<div class="layui-input-block" onclick="img_btn()">
                        <div class="layui-upload-drag">
                            <i class="layui-icon layui-icon-add-1"></i>
                        </div>
                    </div>-->
                    <button type="button" class="layui-btn add_btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                        <input type="hidden" name="carTravelCard" id="carTravelCard" />
                    </div>
                </div>
            </div>

            <h5 class="lheight">车辆图片：</h5>
            <div class="" style="position: relative;">
                <div class="layui-upload">
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">预览图：
                        <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
                    </blockquote>
                    <button type="button" class="layui-btn add_btn" id="scpt_btn">图片上传</button>
                    <input type="hidden" name="carPicIds" id="carPicIds" />
                </div>
            </div>

            <!--模板-->
            <div class="layui-form-item layui-col-space10">
                <div class="layui-input-block">
                    <button type="reset" class="layui-btn layui-btn-primary btn-left">关闭</button>
                    <button class="layui-btn add_btn btn-left" lay-submit lay-filter="component-form-element">提交</button>
                </div>
            </div>

        </form>
    </div>
</div>


</body>

<script>
    // 删除图片
    $(document).on("click", ".file-iteme .handle", function (event) {
        var fileId=$(this).attr("fileId");
        var imgs=$("#carPicIds").val();
        var arr=new Array();
        arr=imgs.split(',');
        arr.splice($.inArray("",arr),1);
        arr.splice($.inArray(fileId,arr),1);
        var object=$(this);
         top.layer.confirm('确认删除？', function(index){
             ax.post({
                 url: schoolWebUrl+"/api/carPicture/delete",
                 type: "POST",
                 data:{"fileId":fileId},
                 contentType: "application/x-www-form-urlencoded",
                 success: function(data){
                     if(data.code==0){
                         var str="";
                         for(var i=0;i<arr.length;i++){
                             str+=arr[i]+",";
                         }
                         $("#carPicIds").val(str);
                         object.parent().remove();
                         layer.close(index);
                         layer.msg(data.message, {icon: 6});
                     }else{
                         layer.msg(data.message, {icon: 5});
                     }
                 }
             });
         });

    });
    var table;
    window.onload=function(){
        var  id=decodeURI(getQueryString('id'));
        ax.post({
            type: "post",
            url: schoolWebUrl+"/api/car/getInfo",
            data: {id:id},
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                layui.use(['form','colorpicker'], function () {
                    $("#carNumbers").val(data.data.carNumbers);
                    $("#colour").val(data.data.colour);
                    $("#id").val(data.data.id);
                    $("#engineNumber").val(data.data.engineNumber);
                    $("#carModel").val(data.data.carModel);
                    $("#carProfile").val(data.data.carProfile);
                    $("#carType").val(data.data.carType);
                    $("#buyTime").val(data.data.buyTime);
                    $("#registerTime").val(data.data.registerTime);
                    $("#fuelType").val(data.data.fuelType);
                    $("#mileage").val(data.data.mileage);
                    $("#insurerTime").val(data.data.insurerTime);
                    $("#insurer").val(data.data.insurer);
                    $("#annualTime").val(data.data.annualTime);
                    if(data.data.carTravelCard!=null){
                        $("#carTravelCard").val(data.data.carTravelCard.fileId);
                        $('#demo1').attr('src', data.data.carTravelCard.src);
                    }
                    if(data.data.carPicIds!=null){
                        var str="";
                        $.each(data.data.carPicIds, function(i,val){
                            str+=val.fileId+",";
                            $('#uploader-list').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle" fileId="'+val.fileId+'"><span class="layui-icon layui-icon-close"></span></div>' +
                                '<img style="width: 100px;height: 100px;" src='+val.src+'>' +
                                '<div class="info">车辆图片</div>' +
                                '</div>'
                            );
                        });
                        $("#carPicIds").val(str);
                    }

                    var form = layui.form;
                    form.render('select'); //刷新select选择框渲染
                });
            }
        });
    }

    layui.use(['table', 'form', 'laydate', 'layer', 'upload', 'colorpicker'], function () {
        table = layui.table;
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload,
            colorpicker = layui.colorpicker;

        //常规用法
        colorpicker.render({
            elem: '#test-rgb',
            //color: '#1c97f5',
            done: function (color) {//颜色选择后的回调
                $('#colour').val(color);
            },
            change: function(color){//颜色被改变的回调
                console.log(color)
             }
        });
        laydate.render({
            elem: '#buyTime',
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#registerTime',
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#insurerTime',
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#annualTime',
            format: 'yyyy-MM-dd'
        });

        //驾驶证图片上传
        ax.upload({
            elem: '#test1',
            url: fileUploadUrl+"?appId="+appId+"&userId="+currentUserId+"&type="+type,
            before: function(obj){
                $("#demo1").attr('src', "");
                $("#carTravelCard").val("");
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });*/
            },
            done: function(res){
                //上传成功
                $("#demo1").attr('src', fileShowUrl+'?id='+res.data);
                $("#carTravelCard").val(res.data);
            }
        });

        ax.upload({
            elem: '#scpt_btn',
            url:fileUploadUrl+"?appId="+appId+"&userId="+currentUserId+"&type="+type,
            multiple: true,
            before: function (obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            },
            done: function (res) {
                layer.close(layer.msg());//关闭上传提示窗口
                //上传完毕
                $('#uploader-list').append(
                    '<div id="" class="file-iteme">' +
                    '<div class="handle"><span class="layui-icon layui-icon-close"></span></div>' +
                    '<img style="width: 100px;height: 100px;" src='+fileShowUrl+'?id='+res.data+'>' +
                    '<div class="info">车辆图片</div>' +
                    '</div>'
                );
                var carPicIds=$("#carPicIds").val();
                $("#carPicIds").val(carPicIds+res.data+",");
            }
        });

        form.on("submit(component-form-element)", function (data) {
            var index = layer.load(0, {shade: false});
            ax.post({
                type: "post",
                url: schoolWebUrl+"/api/car/updateCar",
                data: $("#from1").serialize(),
                contentType: "application/x-www-form-urlencoded",
                success: function (r) {
                    layer.alert(r.message);
                    layer.close(index);
                    if (r.code == 0) {
                        //刷新父页面
                        setTimeout( function(){
                            topFrame.location.reload();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        }, 2 * 1000 );//延迟2000毫米
                    }
                },
            });
            return false;
        });


    });


    $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
        if (event.type === "mouseenter") {
            //鼠标悬浮
            $(this).children(".info").fadeIn("fast");
            $(this).children(".handle").fadeIn("fast");
        } else if (event.type === "mouseleave") {
            //鼠标离开
            $(this).children(".info").hide();
            $(this).children(".handle").hide();
        }
    });
</script>
</html>